<template>
  <div ref="substation">
    站点管理
    <!-- <Divider orientation="left">变电站统计</Divider>
    <Row>
      <i-col span="8">第三方变电站：{{ typestatis.third }}</i-col>
      <i-col span="8">自营变电站：{{ typestatis.self }}</i-col>
    </Row>
    <Divider orientation="left">变电站查询</Divider>
    <Row>
      <i-col span="2">
        <Cascader
          :data="partProvCityDist"
          change-on-select
          @on-change="changePCD"
        ></Cascader>
      </i-col>
      <i-col span="2">
        <Select v-model="searchParam.voltage" placeholder="电压" multiple>
          <Option
            v-for="(voltage, index) in voltages"
            :value="voltage.value"
            :key="index"
            >{{ voltage.label }}</Option
          >
        </Select>
      </i-col>
      <i-col span="2">
        <Select v-model="searchParam.type" placeholder="类型" multiple>
          <Option
            v-for="(type, index) in types"
            :value="type.value"
            :key="index"
            >{{ type.label }}</Option
          >
        </Select>
      </i-col>
      <i-col span="4">
        <DatePicker
          type="datetimerange"
          placeholder="选择日期"
          style="width:100%"
          @on-change="changeDatePick"
        ></DatePicker>
      </i-col>
      <i-col span="2">
        <Button type="primary" @click="search">查询</Button>
        <Button type="primary" @click="add">新增</Button>
      </i-col>
    </Row>
    <Divider orientation="left">变电站列表</Divider>
    <Table
      :columns="tableHeader"
      :data="list"
      @on-sort-change="changeSort"
    ></Table>
    <Page
      :total="searchParam.total"
      :page-size="searchParam.pageSize"
      show-elevator
      prev-text="上一页"
      next-text="下一页"
      @on-change="changePage"
    /> -->
  </div>
</template>

<script>
export default {
  name: "Substation",
  data() {
    return {
      // 根据用户统计变电站信息
      typestatis: {
        self: {
          problem: "0", // 当前用户权限下的变电站总数
          abnormal: "0", // 已运行变电站下面的监测设备总数
          deploy: "0", // 有严重问题（未处置信息）的变电站数
          all: "0" // 自营变电站总数
        },
        third: {
          problem: "0",
          abnormal: "0",
          deploy: "0",
          all: "0"
        }
      },
      // 获取指定区域下的省市区数据
      partProvCityDist: [],
      // 电压字典
      voltages: [],
      // 变电站类型字典
      types: [],
      // 表头
      tableHeader: [
        {
          title: "序列号",
          key: "index"
        },
        {
          title: "sid",
          key: "sid",
          sortable: true
        },
        {
          title: "站点名称",
          key: "short",
          filters: [
            {
              label: "请选择站点名称",
              value: 0
            }
          ],
          filterRemote: (value, row) => {
            this.changeFilter(value, row);
          }
        },
        {
          title: "站点状态",
          key: "status",
          sortable: true,
          filters: [
            {
              label: "请选择站点状态",
              value: 0
            }
          ],
          filterRemote: (value, row) => {
            this.changeFilter(value, row);
          }
        },
        {
          title: "电压等级",
          key: "voltage",
          sortable: true,
          filters: [
            {
              label: "请选择电压等级",
              value: 0
            }
          ],
          filterRemote: (value, row) => {
            this.changeFilter(value, row);
          }
        },
        {
          title: "调度等级",
          key: "grade",
          sortable: true,
          filters: [
            {
              label: "请选择调度等级",
              value: 0
            }
          ],
          filterRemote: (value, row) => {
            this.changeFilter(value, row);
          }
        },
        {
          title: "站点类型",
          key: "type",
          sortable: true,
          filters: [
            {
              label: "请选择站点类型",
              value: 0
            }
          ],
          filterRemote: (value, row) => {
            this.changeFilter(value, row);
          }
        },
        {
          title: "产权单位",
          key: "owner",
          sortable: true,
          filters: [
            {
              label: "请选择产权单位",
              value: 0
            }
          ],
          filterRemote: (value, row) => {
            this.changeFilter(value, row);
          }
        },
        {
          title: "运维单位",
          key: "maintainer",
          sortable: true,
          filters: [
            {
              label: "请选择运维单位",
              value: 0
            }
          ],
          filterRemote: (value, row) => {
            this.changeFilter(value, row);
          }
        },
        {
          title: "所属区域",
          key: "region"
        },
        {
          title: "创建时间",
          key: "crtime"
        },
        {
          title: "修改时间",
          key: "chtime"
        },
        {
          title: "操作",
          key: "handle",
          width: 200,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  type: "Button",
                  class: "ivu-btn ivu-btn-warning",
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      console.log("查看详情");
                    }
                  }
                },
                "查看详情"
              ),
              h(
                "Button",
                {
                  type: "Button",
                  class: "ivu-btn ivu-btn-primary",
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.edit(params.row);
                    }
                  }
                },
                "编辑"
              )
            ]);
          }
        }
      ],
      // 列表
      list: [],
      // 查询条件
      searchParam: {
        search: {
          prov: [],
          city: [],
          dist: [],
          short: [],
          sid: [],
          voltage: [],
          type: [],
          crtime: []
        },
        sorType: {},
        statis: {
          short: {
            page: 1,
            pageSize: 20
          }
        },
        page: 1, // 页码
        pageSize: 5, // 每页显示的条数
        total: 1 // 总条数
      },
      // 列表id
      detailId: "",
      // 详情模态框状态
      detailModSta: false,
      // 新增模态框状态
      addModSta: false
    };
  },
  created() {
    let _self = this;
    let obj = {};
    // 获取省市区变电站集合
    this.$axios.post("/substation/getProvCityDist", obj).then(res => {
      _self.partProvCityDist = res.data;
    });
    // 电压等级
    this.$axios.post("/dic/voltage", obj).then(res => {
      _self.voltages = res.data;
    });
    // 变电站类型
    this.$axios.post("/dic/substype", obj).then(res => {
      _self.types = res.data;
    });
    // 统计变电站类型相关
    this.$axios.post("/substation/typestatis", obj).then(res => {
      console.log("res.data", res.data);
      _self.typestatis = res.data;
    });
  },
  mounted() {},
  computed: {},
  methods: {
    // 联级选择事件
    changePCD(v, s) {
      this.searchParam.search.prov = [];
      this.searchParam.search.city = [];
      this.searchParam.search.dist = [];
      this.searchParam.search.short = [];
      let l = s.length;
      if (l) {
        let pcds = ["prov", "city", "dist", "short"];
        s.forEach((obj, index) => {
          let pcd = pcds[index];
          this.searchParam.search[pcd].push(obj.label);
          let set = new Set(this.searchParam.search[pcd]); // 去重
          this.searchParam.search[pcd] = [...set]; // 去重
        });
      }
    },
    // 日期选择器
    changeDatePick(d) {
      this.searchParam.search.crtime = d;
    },
    // 变电站查询
    search() {
      let _self = this;
      let obj = this.searchParam;
      console.log("obj", obj);
      this.$axios.post("/substation/search", obj).then(res => {
        _self.list = res.data.list;
        _self.searchParam.total = res.data.count;
      });
      // 统计
      this.$axios.post("/substation/statis", obj).then(res => {
        // 变电站名称
        let shortArr = [];
        res.data.shortGroup.forEach(item => {
          shortArr.push({
            label: item._id + "(" + item.count + ")",
            value: item._id
          });
        });
        _self.tableHeader[2]["filters"] = shortArr;
        // 站点状态
        let statusArr = [];
        res.data.statusGroup.forEach(item => {
          statusArr.push({
            label: item._id + "(" + item.count + ")",
            value: item._id
          });
        });
        _self.tableHeader[3]["filters"] = statusArr;
        // 电压等级
        let voltageArr = [];
        res.data.voltageGroup.forEach(item => {
          voltageArr.push({
            label: item._id + "(" + item.count + ")",
            value: item._id
          });
        });
        _self.tableHeader[4]["filters"] = voltageArr;
        // 调度等级
        let gradeArr = [];
        res.data.gradeGroup.forEach(item => {
          gradeArr.push({
            label: item._id + "(" + item.count + ")",
            value: item._id
          });
        });
        _self.tableHeader[5]["filters"] = gradeArr;
        // 站点类型
        let typeArr = [];
        res.data.typeGroup.forEach(item => {
          typeArr.push({
            label: item._id + "(" + item.count + ")",
            value: item._id
          });
        });
        _self.tableHeader[6]["filters"] = typeArr;
        // 产权单位
        let ownerArr = [];
        res.data.ownerGroup.forEach(item => {
          ownerArr.push({
            label: item._id + "(" + item.count + ")",
            value: item._id
          });
        });
        _self.tableHeader[7]["filters"] = ownerArr;
        // 运维单位
        let mainArr = [];
        res.data.mainGroup.forEach(item => {
          mainArr.push({
            label: item._id + "(" + item.count + ")",
            value: item._id
          });
        });
        _self.tableHeader[8]["filters"] = mainArr;
      });
    },
    // 变电站重置
    searchReset(name) {
      this.$refs[name].resetFields();
    },
    // 分页页码改变时
    changePage(value) {
      this.searchParam.page = value;
      this.$options.methods.search.bind(this)();
    },
    // 排序
    changeSort(data) {
      let _self = this;
      if (data.order === "asc") {
        this.searchParam.sorType[data.key] = 1;
      } else if (data.order === "desc") {
        this.searchParam.sorType[data.key] = -1;
      } else {
        this.searchParam.sorType = {};
      } // 排序条件
      let obj = this.searchParam;
      this.$axios.post("/substation/search", obj).then(res => {
        _self.list = res.data.list;
        _self.searchParam.total = res.data.count;
      });
    },
    // 筛选
    changeFilter(v, r) {
      console.log("999", v, r);
      this.searchParam.search[r] = v;
      this.$options.methods.search.bind(this)();
    },
    // 编辑
    edit(row) {
      this.detailId = row.id; // 列表id
      this.detailModSta = true; // 显示模态框
    },
    // 【编辑组件调用方法】关闭详情模态框
    changeDetailModSta(childVal) {
      this.detailModSta = childVal;
    },
    // 新增
    add() {
      this.addModSta = true; // 显示新增模态框
    },
    // 【新增组件调用方法】关闭新增模态框
    changeAddModSta(childVal) {
      this.addModSta = childVal;
    }
  }
};
</script>
